<template>
  <div>
    <div class="departnames" @click="handleFocus">
        <div class="staff-info" v-if="selectedDepart && selectedDepart.length > 0">
            <a @click.stop="del(index)" class="selected-people marign4" 
                v-for="(item,index) in selectedDepart" :key="index">
                    {{item.F_FullName}}<i slot="suffix" class="el-icon-close fontsize16"></i></a>
        </div>
        <div class="staff-info1 plachcholder-text" v-else>
            请选择
        </div>
        <div class="icon-jiantou">
            <img src="../../assets/flowlist/down_jiantou.png">
        </div>
    </div>
    
    <el-dialog title="请选择部门" 
        :close-on-click-modal="false"
        append-to-body 
        :visible.sync="dialogVisible" width="1118px" :before-close="handleClose">
        <div class="select-personal">
            <div class="left textaligncenter">
                <el-input class="search-input" placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
                <el-tree :data="data"
                    node-key="id"
                    show-checkbox
                    ref="tree"
                    :check-on-click-node="true"
                    :filter-node-method="filterNode"
                    @check="handleNodeClick"
                    :props="defaultProps">
                </el-tree>
            </div>

            <div class="middle textalignleft">
                <div class="node-name">已选部门：</div>
                <div class="textalignleft">
                    <div class="staff-name" v-if="selectedDepart && selectedDepart.length > 0">
                        <a class="selected-people" 
                            v-for="(item,index) in selectedDepart" :key="index"
                            @click="deleteStaff(index)" >
                            {{item.F_FullName}}<i slot="suffix" class="el-icon-close fontsize16"></i>
                        </a>
                    </div>
                    <div class="nodata" v-else>
                        <img src="../../assets/flowlist/no-data.png">
                    </div>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="determine">确 定</el-button>
            <el-button @click="determine">取 消</el-button>
        </span>
    </el-dialog>
    
  </div>
</template>

<script>

import { getCompanyDepartments } from "@/api/organization/department";
import { getCompaniesUserList} from "@/api/organization/user";

export default {
    name: 'staffSelector',
    data(){
        return{
            dialogVisible:false,
            departNames:'',
            filterText: '',
            departmentIds:'',
            data: [],
            defaultProps: {
                children: 'children',
                label: 'F_FullName'
            },
            nodeName:'',
            Department_Id:'',
            Company_Id:'',
            staffList:[],
            userName:'',
            selectName:'',
            selectedDepart:[]
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
    },
    methods:{
        handleFocus(){
            this.dialogVisible = true
            this.getNodeData()
        },
        deleteStaff(i){
            this.selectedDepart.splice(i,1)
            
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.F_FullName.indexOf(value) !== -1;
        },
        handleNodeClick(){
            this.selectedDepart = this.$refs.tree.getCheckedNodes()
        },
        async getNodeData(){
          let result =  await getCompanyDepartments()
          if(result.data.success){
            this.data = result.data.data
          }
        },
        determine(){
            if(this.selectedDepart && this.selectedDepart.length > 0){
                this.selectedDepart.forEach(e=>{
                    this.departmentIds += e.F_DepartmentId+','
                })
                if(this.departmentIds){
                    this.departmentIds = this.departmentIds.substring(0,this.departmentIds.lastIndexOf(','))
                    this.$emit("sendData",this.departmentIds)
                }
            }
            this.dialogVisible = false
        },
        del(index){
            this.departmentIds = ''
            this.selectedDepart.splice(index,1)
            if(this.selectedDepart && this.selectedDepart.length > 0){
                this.selectedDepart.forEach(e=>{
                    this.departmentIds += e.F_DepartmentId+','
                })
                if(this.departmentIds){
                    this.departmentIds = this.departmentIds.substring(0,this.departmentIds.lastIndexOf(','))
                    this.$emit("sendData",this.departmentIds)
                }
            }else{
                this.$emit("sendData","")
            }
        }
    }
}
</script>

<style scoped>
.select-personal{
    width: 100%;
    height: 600px;
    display: flex;
    flex-direction: row;
}
.left{
    width: 40%;
    height: 100%;
    border-right: 1px solid #DEDEDE;
    border-bottom: 1px solid #DEDEDE;
    overflow: scroll;
}
.middle{
    width: 60%;
    height: 100%;
    border-right: 1px solid #DEDEDE;
    border-bottom: 1px solid #DEDEDE;
    overflow: scroll;
}
.textaligncenter{
    text-align: center;
}
.textalignleft{
    text-align: left;
}
::v-deep .el-dialog__body{
    padding:0 0 10px 0!important;
}
.search-input{
    width: 90%;
    height: 36px;
    margin-top: 10px;
}
.node-name{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #606266;
    line-height: 28px;
    margin-top: 10px;
    margin-left: 32px;
}
.selected-staff-box{
    margin-left: 32px;
    margin-right: 32px;
    margin-top: 10px;
}
.selected-staff-box:hover{
    cursor: pointer;
}
.selected-people{
    padding: 0 18px;
    background: #EEEEEE;
    border-radius: 2px;
    margin-left: 12px;
    margin-top: 8px;
}
.marign4{
    margin: 4px 4px!important;
}
.selected-people:hover{
    cursor: pointer;
}
.staff-name{
    color: #606266;
    margin-top: 10px;
    border-radius:4px;
    margin: 0 32px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.staff-name1:hover{
    background: #e5f1ff;
}
.staff-name-items{
    margin-left: 32px;
    margin-top: 8px;
}
.selected-staff{
    width: 80px;
    height: 30px;
    background: #EEEEEE;
    border-radius: 2px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #444444;
    line-height: 30px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.selected-staff:hover{
    cursor: pointer;
}
.fontsize16{
    margin-left: 8px;
}
::v-deep .el-radio-group{
    display: block!important;
    margin-top: 15px;
}
.nodata{
    margin-left: 32px;
    text-align: center;
}
.nodata > img{
    margin-top: 150px;
}
.departnames{
    width: 100%;
    border:1px solid #DCDFE6;
    border-radius: 4px; 
    opacity: 0.8;
    display: flex;
    flex-direction: row;
    
}
.departnames:hover{
    cursor: pointer;
    opacity: 1;
}

.icon-jiantou{
    width: 5%;
    height: 100%;
    text-align: right;
}
.icon-jiantou::after{
    content: '';
    display: inline-block;
    height: 100%;
    width: 1px;
    vertical-align: middle;
}
.icon-jiantou>img{
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
.staff-info{
    width: 95%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.staff-info1{
    width: 95%;
}
.plachcholder-text{
    color: #606266;
    text-indent: 1em;
    opacity: 0.6;
}
</style>
